<template>
	<view class="page-cont">
		<navbar title="日志查询"></navbar>
		<view class="main-cont" :style="{height: pageHeight, paddingLeft: sysStatusBarHeight}">
			<view class="search-cont">
				<uni-easyinput v-model="page.keyword" placeholder="请输入点位名称" style="border: none;"></uni-easyinput>
				<image class="search-cont-icon" src="/static/home_search.png" @click="handleQuery"></image>
			</view>
			<scroll-view class="table-cont" :style="{height: pageHeight}" scroll-y refresher-enabled
				:refresher-triggered="isRefresh" @refresherrefresh="handlePullDownRefresh"
				@scrolltolower="handleReachBottom">

				<uni-table style="width: 100%;" border emptyText="暂无相关数据">
					<!-- 表头行 -->
					<uni-tr>
						<uni-th>用户</uni-th>
						<uni-th>操作内容</uni-th>
						<uni-th>时间</uni-th>
					</uni-tr>

					<!-- 表格数据行 -->
					<uni-tr v-for="(item, index) in logList" :key="index">
						<uni-td>{{item.username?item.username:"-"}}</uni-td>
						<uni-td>{{`将设备【${item.devname}】变量【${item.pointname}】的值由【${item.oldval}】改为【${item.newval}】`}}</uni-td>
						<uni-td>{{item.time}}</uni-td>
					</uni-tr>
				</uni-table>

			</scroll-view>
		</view>
	</view>
</template>
<script setup lang="ts">
	import { reactive, ref } from 'vue';
	import { onShow, onLoad } from "@dcloudio/uni-app";
	import { useNavbar } from "@/utils/hooks.js";
	import { storeToRefs } from 'pinia';
	import { getLogList } from "@/api/data.js";
	import useUserStore from '@/store/user.js';
	import useHomeStore from '@/store/home';
	import * as dataApi from '@/api/data.js'
	const homeStore = useHomeStore();
	const { pageHeight, sysStatusBarHeight } = useNavbar();
	const { projectId } = storeToRefs(homeStore);
	const isRefresh = ref(false)
	const page = reactive({
		pageNum: 1,
		pageSize: 10,
		total: 0,
		keyword: "",//关键字
	});
	const logList = ref([])

	onShow(() => {

	});

	onLoad(() => {
		getList();
	});

	function getList() {
		if (!projectId.value) {
			return;
		}
		let params = {
			pageNum: page.pageNum,
			pageSize: page.pageSize,
			name: page.keyword,
			mid: projectId.value,
		};
		dataApi.getDevoperLog(params).then(res => {
			isRefresh.value = false;
			let pageData = res.data;
			page.total = pageData.total || 0;
			// logList.value = pageData.list || [];

			if (page.pageNum == 1) {
				logList.value = pageData.list || [];
			} else {
				logList.value = logList.value.concat(pageData.list || []);
			}
		});
	}

	function handleQuery() {
		page.pageNum = 1;
		getList();
	}

	// 下拉刷新
	const handlePullDownRefresh = () => {
		isRefresh.value = true;
		page.pageNum = 1;
		getList();
	}

	// 上拉加载更多
	const handleReachBottom = () => {
		console.log(page.pageNum)
		if (page.pageNum * page.pageSize < page.total) {
			page.pageNum++;
			getList();
		}
	}
</script>
<style lang="scss" scoped>
	.page-cont {
		.main-cont {
			padding: 10px !important;
			box-sizing: border-box;
		}

		.search-cont {
			padding: 5px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-radius: 5px;
			background-color: #fff;
			box-sizing: border-box;

			.search-cont-icon {
				margin-left: 10px;
				padding: 5px;
				width: 30px;
				height: 30px;
				box-sizing: border-box;
			}

			::v-deep .is-input-border {
				border: none !important;
				border-width: 0;
			}

			::v-deep .uni-easyinput__content-input {
				padding: 0;
				border-radius: 3px;
				background-color: #EFF1F7;
			}
		}

		.table-cont {
			margin-top: 10px;
			padding: 10px;
			border-radius: 5px;
			background-color: #fff;
			box-sizing: border-box;

			::v-deep .uni-table {
				min-width: 300px !important;
			}

			::v-deep .uni-table-th {
				padding: 6px 10px !important;
				width: 33.33% !important;
				background-color: #F2F3F9;
			}


			::v-deep .uni-table-td {
				color: #6E84A2;
			}
		}
	}
</style>